<template>
<div class="content-wrapper">
    <el-row :gutter="20">
      <el-col :span="5">
          <div class="grid-content">
            <div class="left-side-tag-style" v-for="value in 5" :key="value">
                <el-card class="box-card">
                  <template #header>
                    <div class="card-header">
                      <span>卡片名称</span>
                      <el-button class="button" type="text">操作按钮</el-button>
                    </div>
                  </template>
                  <div v-for="o in 4" :key="o" class="text item">
                    {{'列表内容 ' + o }}
                  </div>
                </el-card>
            </div>
          </div>
          </el-col>
      <el-col :span="19">
          <!--头部筛选标签-->
          <div class="select-option">
            <div class="select-option-left">精选推荐</div>
            <div class="select-option-right">
              <ul>
                <li>最新</li>
                <li>最热</li>
                <li>销量<span class="el-icon-caret-bottom"></span></li>
                <li>价格<span class="el-icon-caret-bottom"></span></li>
              </ul>
            </div>
          </div>
          <!--头部筛选标签-->
          <!--内容展示实体-->
          <div class="grid-content wrapper-flex">
            <div class="goods-items" v-for="value in 15" :key="value">
                <el-card shadow="hover">
                  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                  <div style="padding: 14px;">
                    <span>好吃的汉堡</span>
                    <div class="bottom">
                      <time class="time">{{ currentDate }}</time>
                      <el-button type="text" class="button">操作按钮</el-button>
                    </div>
                  </div>
                </el-card>
            </div>
            <!--分页区域-->
            <div class="pagenoters"> 
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
                class="pagenoters-right"
              >
              </el-pagination>
            </div>
            <!--分页区域-->
          </div>
          <!--内容展示实体-->
      </el-col>
    </el-row>
</div>
</template>


<script>
export default {
    name: 'content',
    data(){
      return {
          currentDate: new Date()
      }
    }
}
</script>

<style scoped>
@import url("//unpkg.com/element-plus/lib/theme-chalk/index.css");
.el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child{
      margin-bottom: 0;
  }  
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    height: 100vh;
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .content-wrapper{
      width: 98%;
      margin: 0 auto;
  }

  .card-header button{
    float: right;
  }
  ul, li{
    list-style: none;
  }
  li{
    float: left;
    width: 80px;
    height: 100%;
  }
  /**warpper-outer-style-left */
  .left-side-tag-style{
    width: 100%;
    margin: 1% auto;
  }
  .wrapper-flex{
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
  }
  .goods-items{
    width: 32.5%;
    margin: 8px 0 0 8px;
  }
  .select-option{
    background-color: #d3dce6;
    width: 99%;
    margin: 0 auto;
    height: 50px;
  }
  .select-option-left{
    line-height: 50px;
    padding-left: 15px;
    float: left;
    width: 100px;
  }
  .select-option-right{
    float: right;
  }
  .up-and-down-left{
    float: left;
  }
  .up-and-down-right{
    width: 20px;
    float: right;
  }
  .pagenoters{
    width: 100%;
  }
  .pagenoters-right{
    margin: 2% auto;
    float: right;
  }
</style>